<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
  <style>
    #status span{ font-style:normal}
    #status .active{ color:red}
  </style>
</head>
<body>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
  function getStatus(status){
   var str = '1.登记 → 2.部门负责人 → 3.单位负责人 → 4.领导 → 5.交办 → 6.办理 → 7.办结'; //声明字符串
   var $t = $('#status'); //获取元素
   var $arr = $(str.split('→')); //将字符串分割成数组
   $t.html('');
   $arr.each(function(index, element) { //each函数遍历
    var $span = $('<span>'+ this +'</span>'); //新建标签
    index>0 ? $t.append(' → ') : ''; // index的值如果大于0,就添加  → 。
    index+1==status ? $span.addClass('active') : ''; // index+1 的值如果等于status 的值，就添加 .active。
    $t.append($span); // 将新建的标签插入 div 标签内。
   });
  }
  $(function(){
   getStatus(1);
  });
 </script>
 <button type="button" onclick="getStatus(1)">1</button>
 <button type="button" onclick="getStatus(2)">2</button>
 <button type="button" onclick="getStatus(3)">3</button>
 <button type="button" onclick="getStatus(4)">4</button>
 <button type="button" onclick="getStatus(5)">5</button>
 <button type="button" onclick="getStatus(6)">6</button>
 <button type="button" onclick="getStatus(7)">7</button>
 <div id="status"></div>
</body>
</html>